<!--
  Generated template for the ContactPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-toolbar color="twitter">
      <ion-searchbar id="search-bar" (ionInput)="ionInput($event)" placeholder='search' animated='true'></ion-searchbar>
    </ion-toolbar>
    <!-- <ion-searchbar (ionInput)="ionInput($event)" placeholder='search' animated='true'></ion-searchbar> -->
  
    <!-- pageNumber：当前屏幕可以显示的类型数目  -->
    <!-- <my-slide (slideClick)="onSlideClick($event)" [slides]="pageSlides" [pageNumber]="5" [selectedIndex]='pageIndex'></my-slide> -->
    <ion-slides class="slide-title" #menuSlides [slidesPerView]="menuNum"  [pager]="false"> 
      <ion-slide *ngFor="let slide of menuData; let i = index;">
        <div (click)="onSlideClick(i)">
            <span class="slide-title-unit" [ngClass]="{'slide-title-active': currIndex == i}">{{slide.name}}</span>
        </div>
      </ion-slide>
    </ion-slides>
  </ion-header>
  <!-- 
    <ion-content padding>  是否在内容上添加内填充。在iOS上默认为true，在Android上为false。
  -->
 


  <ion-slides class="slide-content" direction="horizontal" #contentSlides (ionSlideDidChange)="slideChanged()" style="height:auto" (ionSlideDrag)="disableRefresh($event)"> 
    <ion-slide *ngFor="let slide of menuData">
      <ion-content style="width:100%;height:90vh;margin-top:94px;" overflow-scroll='false'>
        <ion-refresher (ionRefresh)="doRefresh($event)" [enabled]="isAtTop" *ngIf="isAtTop">
            <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在加载中..."></ion-refresher-content>
        </ion-refresher>
        <ion-list style="padding-right:16px;">  
          <ion-item *ngFor="let item of temphHomeArticles" (click)="openArticles($event, item.url)">  
            <div *ngIf="item.type == 1">
              <div class="list-left" style="float:left; width:65%;">
                <div class="list-title">{{item.title}}</div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
              </div>
              <div class="list-picture"><img src="{{item.images}}" alt=""></div>
            </div>
            <div *ngIf="item.type == 2" class="border-div">
                <div class="list-title">{{item.title}}</div>
                <div class="list-picture2">
                  <img src="{{pic}}" mode='widthFix' alt="" *ngFor="let pic of item.images">
                </div>
                <div style="margin-top:10px;">
                    <span class="list-author">{{item.author_name}}</span>
                    <span class="list-date">{{item.date}}</span>
                </div>
            </div>
          </ion-item>
        </ion-list>
        <ion-infinite-scroll (ionInfinite)="doInfinite($event)" immediate-check="false">
          <ion-infinite-scroll-content
            loadingSpinner="bubbles"
            loadingText="正在加载更多数据">
          </ion-infinite-scroll-content>
        </ion-infinite-scroll>
      </ion-content>
    </ion-slide>
  </ion-slides>


